<template>
  <div>
      <postDetailHeader :post="post"/>
        <div class="normalPost">
            <div class="title" v-if="post.type != 2">{{post.title}}</div>
            <div class="info" v-if="post.type != 2 && post.user">{{post.user.nickname}} 2019-10-10</div>
            <video src="https://video.pearvideo.com/mp4/adshort/20191031/cont-1617802-14542116_adpkg-ad_hd.mp4"
            :poster="post.cover[0].url"
            controls="controls"
            class="video"
            v-if="post.type == 2">
            </video>
            <div class="userData" v-if="post.type == 2">
                <div class="top">
                    <img :src="post.user.head_img" alt="" class="userHeaderImg">
                    <div class="name">{{post.user.nickname}}</div>
                    <div class="btnFollowActive" v-if="!post.has_follow" @click="follow">关注</div>
                    <div class="btnFollow" v-else-if="post.has_follow" @click="unfollow">已关注</div>
                </div>
                <div class="title">{{post.title}}</div>
            </div>
            <div class="content" v-html="post.content" v-if="post.type != 2"></div>
            <div class="actionBtns">
                <div class="like" @click="like">
                    <span class="iconfont icondianzan" :class="{red:post.has_like}"></span>
                    {{post.like_length}}
                </div>
                <div class="wechat">
                    <span class="iconfont iconweixin"></span>
                    <a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">
                    微信
                    </a>
                </div>
            </div>   
        </div>
        <div class="comments">
            <h2 class="title">精彩跟帖</h2>
            <div class="emptyComment" v-if="comments.length == 0">
                暂无跟帖,抢占沙发
            </div>
            <div v-else>
            <comment v-for="(item,index) of comments" :key="index" :commentItem="item" @reply="reply"/>
             <div class="btnMoreComments" @click="toPage">
                    更多跟帖
                </div>
            </div>
        </div>
      <postDetailFooter :post="post" :isActive="replyActive" :replyObj="replyObj" @newComment="getComments"/>
  </div>
</template>

<script>
import postDetailHeader from '../components/postDetailHeader';
import postDetailFooter from '../components/postDetailFooter';
import comment from '../components/comment'
export default {
    components:{
        postDetailHeader,
        postDetailFooter,
        comment
    },
    data(){
        return {
            postId: this.$route.params.id,
            post: {},
            comments: [],
            replyActive: 0,
            replyObj:{}
            
        }
    },
    methods:{
        reply(replyObj){
            // 之所以把replyActive设置为1，是因为没有找到什么好的解决方法，防止用户点击回复，又取消，然后第二次点击，输入框弹不出来的原因
             this.replyActive += 1;
            this.replyObj = replyObj;
            // console.log(this.replyObj)

        },
        // 跳往精彩评论页面
        toPage(){
            this.$router.push({
                name: 'morecommentsPage',
                params:{
                    id: this.postId
                }
            })
        },
        // 获取评论数据方法
        getComments(){
            this.$axios({
                url: '/post_comment/' + this.postId,
                method: 'get',
                params: {
                    pageSize:3
                    }
            }).then(res=>{
                const {data} = res.data;
                console.log(res);
            data.forEach(element => {
                // 判断是否有头像，没有就每一项给一个默认头像，有的话，判断图片路径有没有以http服务器地址开头，没有的话，就把服务器地址加上去，这样才能访问服务器地址图片
                if(!element.user.head_img){
                    element.user.head_img="/static/imgs/touxian.jpg"
                }else{
                if(element.user.head_img.indexOf('http') < 0){
                    element.user.head_img= this.$axios.defaults.baseURL + element.user.head_img
                }
            }
                });
                // 处理好的数据，存入数组
            this.comments = data;
            })
        },
        // 点赞，取消点赞的方法
        like(){
            this.$axios({
                url: '/post_like/' + this.post.id,
                method: 'get',
            }).then(res=>{
                const {message} = res.data;
                if(message == '点赞成功'){
                    this.post.has_like = true;
                    this.post.like_length +=1;
                }else if(message == '取消成功'){
                     this.post.has_like = false;
                    this.post.like_length -=1;
                }
                // console.log(res)
            })
        },
        // 关注用户方法
        follow() {
      // 这里我应该发送 ajax 请求关注用户
      this.$axios({
        url: "/user_follows/" + this.post.user.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        // console.log(message);
        // 如果我们点击了关注,返回的 message == '关注成功'
        // 那么这个请求就算完成了

        if (message == "关注成功") {
          this.post.has_follow = true;
        }
      });
    },
    // 取消关注方法
    unfollow() {
      // 这里我应该发送 ajax 请求取消关注用户
      this.$axios({
        url: "/user_unfollow/" + this.post.user.id,
        method: "get"
      }).then(res => {
        const { message } = res.data;
        // console.log(message);
        // 如果我们点击了已关注,返回的 message == '取消关注成功'
        // 那么这个请求就算完成了

        if (message == "取消关注成功") {
          this.post.has_follow = false;
        }
      });
    },
    // 获取文章或者视频详情的方法
    renovatePage(){
        // console.log( this.postId)
        this.$axios({
            url: '/post/' + this.postId,
            method: 'get',
        }).then(res=>{
            const {data} = res.data;
            if(!data.user.head_img){
                data.user.head_img="/static/imgs/touxian.jpg"
            }else{
                if(data.user.head_img.indexOf('http') < 0){
                    data.user.head_img= this.$axios.defaults.baseURL + data.user.head_img
                }
            }
            this.post = data;
            // console.log(res)
        })
    }
    },
    mounted(){
        // 挂载完毕渲染页面
        this.renovatePage();
        // 获取回复数据
        this.getComments();
    }

}
</script>

<style lang="less" scoped>
.normalPost  {
    padding: 2.778vw;
    // padding-bottom: 22.222vw;
}
.video{
    width: 100%;

}
.title {
    font-size: 5.556vw;
    font-weight: 600;
    color: #333;
}
.info {
    font-size: 3.611vw;
    color: #a2a2a2;
    margin: 2.778vw 0 5.556vw 0;
}
.content{
    color: #333;
    /deep/ img{
        width: 100%;
    }
}
.actionBtns {
    margin: 5.556vw 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .like, .wechat {
        border: 1px solid #333;
        height: 8.333vw;
        line-height: 8.333vw;
        text-align: center;
        border-radius: 4.167vw;
        padding: 0 4.167vw;
        .iconfont {
            margin-right: 0.833vw;
        }
    }
    .wechat {
        font-size: 12px;
        padding: 0 2.778vw;
        .iconfont {
            color: #00c800;
        }
    }
}
.red{
    color: red;
}
//独有视频样式
.userData{
    // display: flex;
    // justify-content: space-between;
    .top{
        display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 4.167vw 0 ;
    //  margin-bottom: 5.556vw;
     .name{
         font-size: 3.611vw;
         flex: 1;
         margin-left: 1.389vw;
         color: #a7a7a7;
     }
    }
    .userHeaderImg{
        width: 6.944vw;
    }
    .btnFollowActive{
            font-size: 3.333vw;
            height: 6.667vw;
            line-height: 6.667vw;
            padding: 0 3.333vw;
            color: white;
            background-color: red;
            border: 1px solid red;
            border-radius: 3.333vw;
        }
        .btnFollow{
            font-size: 3.333vw;
            height: 6.667vw;
            line-height: 6.667vw;
            padding: 0 3.333vw;
            color: #888;
            // background-color: red;
            border: 1px solid #888;
            border-radius: 3.333vw;
        }
}
.comments{
    padding-bottom: 22.222vw;
    border-top: 1.389vw solid #eee;
    .title{
        font-weight: normal;
        padding-top:4.167vw;
        text-align: center;
        font-size: 5vw;
    }
    .emptyComment{
        display: flex;
        justify-content: center;
        height: 27.778vw;
        align-items: center;
        font-size: 3.889vw;
    }
}
// 更多跟帖样式
.btnMoreComments {
        height: 8.333vw;
        line-height: 8.333vw;
        text-align: center;
        border: 1px solid #333;
        width: 33.333vw;
        border-radius: 4.167vw;
        margin: 8.333vw auto 0;
}
</style>